<!DOCTYPE html>
<html>

<head>
    <title>MyOrders</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />  -->
    <!-- <link href="./css/bootstrap.css" rel="stylesheet"> -->
     <!-- <script src="./js/jquery.min.js"></script>  -->

    <!-- <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> -->

    <!-- <script src="./js/bootstrap.js"></script>
    <link href="./css/orderdetail.css" rel="stylesheet" />
    <link href="./css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="./js/star-rating.min.js" type="text/javascript"></script> -->


    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.js"></script>

    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="./css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="./css/orderdetail.css" rel="stylesheet" />
    <!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
    
    <script src="./js/star-rating.js" type="text/javascript"></script>


</head>
<script type="text/javascript">
    window.config = {
        serverHost: 'http://10.222.29.198:8080/amc-c',
        // serverHost: 'http://localhost:8080/amc-c'
    }

</script>

<body id="login">
    <div class="login-logo">
        <div class="banner1">
            <div class="container">
                <div class="header-nav">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					</button>
                            <div class="logo">
                                <a class="navbar-brand" href="#">Platform</a>
                            </div>
                        </div>

                        <div class="collapse navbar-collapse nav-wil">
                            <ul class="nav navbar-nav pull-right">
                                <li style="margin-right: 20px;"><a href="index.html">Home</a></li>
                                <li style="margin-right: 20px;"><a href="menu.html">Menu</a></li>
                                <li><a href="./personal.html">Personal</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
                <hr style="padding-left: 10px; padding-right: 10%" />
            </div>
        </div>
    </div>
    <div class="app-cam">
        <div class="col-md-5" style="background-color: #fff; min-height: 320px; margin-left: 28.55%;">
            <div class="profile-panel" role="main" style="padding: 20px 0 20px 0;">
                <h3 class="profile-paneltitle">
                    <span>订单详情 <span id="status" style="font-size: 16px; color: #9f9f9f;">(订单状态)</span></span>
                    <a href="#" id="reback" onclick="history.go(-1)" class="pull-right" style="text-decoration: none; font-size: 14px; line-height: 25px; color: red;">
                        <<返回</a>
                </h3>
                <hr style="margin: 10px 0 10px 0;" />
                <div class="profile-panelcontent">
                    <div id="foodsPic" style="display:inline-block;"></div>
                    <div style="margin-top: 20px; width: 100%;">
                        <span>订单号：<span id="orderId">xxxxxxxxxxxxxxxxxxx</span></span>
                    </div>
                    <div style="margin-top: 10px;">
                        <div>
                            <h4 style="color: blue; font-weight: 600;">
                                <span id="merchantName">商家名称</span>
                                <input type="hidden" id="merchantId" />
                                <a id="complaint_btn" href="#complaint" role="button" class="btn" style="display:none; font-size: 14px; margin-left: 10px;"
                                    data-toggle="modal">(我要投诉)</a>
                            </h4>
                            <div id="foodsContent">
                                <p><span>菜品：</span> <span></span></p>
                                <p><span>数量：</span> <span>1</span></p>
                            </div>
                            <div>
                                <p><span>小计(元)：</span> <span id="countsPrice">00.00</span></p>
                            </div>
                        </div>

                        <hr style="padding-bottom: 10px;" />
                        <div>
                            <h5>配送信息</h5>
                            <div>
                                <p><span>配送方式：</span> <span>商家配送</span></p>
                                <p><span>送达时间：</span> <span id="confirmTime">尽快送出</span></p>
                            </div>
                            <div>
                                <p><span>联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span> <span id="addressContactPerson">MC Jin</span></p>
                                <p><span>联系电话：</span> <span id="addressContactTel">xxx xxxx xxxx</span></p>
                                <p><span>收货地址：</span> <span id="addressName">ITA XXXXXX</span></p>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="comment_div" style="display:none;">
                    <hr style="padding-bottom: 10px;" />
                    <h4>评分评论</h4>
                    <div>
                        <p>评分:
                            <input id="input-id" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs">
                        </p>
                        <img src="" alt="" />
                    </div>
                    <div>
                        <p>评论: </p>
                        <textarea id="comment_text" class="form-control" style="padding: 0px;" rows="3"></textarea>
                    </div>

                    <div style="width: 100%; text-align: center; margin-top: 10px;">
                        <button id="comment-btn" class="comment-btn">Comment</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- complaint  -->
    <div class="modal fade" id="complaint" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        投诉商家
                    </h4>
                </div>
                <div class="modal-body" id="complaint_content">
                    <textarea id="complaint_text" class="form-control" style="padding: 0px;" rows="3"></textarea>
                    <p id="complaint_errorText" style="margin-left: 10px; color: red;"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="complaint_submit" type="button" class="btn btn-primary">发送</button>
                </div>
            </div>

        </div>
    </div>

    <!-- complaint SUCCESS -->
    <div class="modal fade" id="complaintSuccess" role="dialog" aria-labelledby="complaintSuccessModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="complaintSuccessModalLabel">
                        Complaint Merchant
                    </h4>
                </div>
                <div class="modal-body">
                    Complaint Merchant Success!
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                </div>
            </div>

        </div>
    </div>

    <!-- comment success  -->
    <div class="modal fade" id="commentSuccess" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="commentModalLabel">
                        Comment
                    </h4>
                </div>
                <div class="modal-body" id="commentResult" style="padding: 10px;">
                    Comment Success!
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="./js/orderdetail.js" type="text/javascript"></script>

</html>